<template>
  <div class="Home">
    <header>文与字</header>
    <swiper :options="swiperOption" class='swiper-box'>
      <swiper-slide v-for="v in swipers" :key="v" ><img :src="v.fdcImage" class="swiper-img" style="width:100%;height:2.3rem;"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="nei">
      <div class="nei_top">
        <img class="head" src="../assets/logo.png">
        <div class="sj">111111</div>
      </div>
      <div class="text1">11111111</div>
      <img class="logoa" src="../assets/logo.png">
      <div class="text2">11111111111111</div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Home',
  data () {
    return {
      swiperOption: {
      autoplay: 3000,
      pagination: '.swiper-pagination',
      autoplayDisableOnInteraction: false,
      loop: true
      },
      swipers:[],
      newxin:[]
    }
  },
  mounted () {
    setTimeout(() => {
        this.asyncCount = 5
    }, 1000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
  color:#fff;
  background: #405f80;
  height:0.45rem;
  text-align: center;
  line-height: 0.45rem;
  font-size: 0.17rem;
}
.swiper-box{
  height:2.3rem;
  border:0.01rem solid red;
}
.nei{
  border-top:0.01rem solid #ededed;
  margin-top: 0.1rem;
  padding-top: 0.06rem;
}
.nei_top{
  display: flex;
  align-items: center; 
  margin-bottom: 0.16rem;
}
.head{
  height:0.28rem;
  width:0.28rem;
  margin-left: 0.11rem;
  margin-right: 0.22rem;
  border-radius: 50%;
}
.sj{
  font-size: 0.1rem;
  color:#6a6a6a;
}
.text{
  font-size: 0.15rem;
  color:#414141;
  

}
.logoa{
  height:2.3rem;
  width: 100%;
  margin-top: 0.14rem;
}
.text1{
  font-size: 0.15rem;
  margin: 0 0.12rem;
  width: 3.25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text2{
  font-size: 0.15rem;
  text-indent:2em;
  width: 3.35rem;
  margin: 0 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:4;
  overflow: hidden;
  text-overflow:ellipsis;
}
</style>
